<template>
    <a-table
        :columns="columns"
        :row-key="(record) => record.id"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
    >
        <template #action="{ record }">
            <a @click="lookDetails(record)">详情</a>
            <a-modal
                title="详情"
                width="600px"
                :mask="false"
                :destroyOnClose="true"
                :visible="visible"
                :confirm-loading="confirmLoading"
                @ok="handleOk"
                @cancel="handleCancel"
            >
                <p>{{ ModalText }}</p>
            </a-modal>
        </template>
    </a-table>
</template>
<script>
    import { getList } from '@/api/alarms'
    import moment from 'moment' //日期处理
    const columns = [
        {
            title: '终端号',
            dataIndex: 'posno',
            align: 'center',
        },
        {
            title: '线路',
            dataIndex: 'line',
        },
        {
            title: '未传公交',
            dataIndex: 'unum1',
            align: 'center',
        },
        {
            title: '未传三方',
            dataIndex: 'unum2',
            align: 'center',
        },
        {
            title: '报警时间',
            dataIndex: 'datetime',
            width: 180,
            align: 'center',
            customRender: (text) => {
                console.log(text)
                console.log(text.text)
                //var date = Date.parse(text)
                //console.log(date)
                //text = 1629270839
                text = moment
                    .unix(Number(text.text))
                    .format('YYYY-MM-DD HH:mm:ss')
                console.log(text)
                return text
            },
        },

        {
            title: '票价版本',
            dataIndex: 'pver',
        },
        {
            title: '名单版本',
            dataIndex: 'bver',
        },
        {
            title: '报警码',
            dataIndex: 'alarm',
        },
        {
            title: '操作',
            dataIndex: 'id,sn',
            key: 'id',
            slots: {
                customRender: 'action',
            },
        },
    ]

    export default {
        data() {
            return {
                ModalText: 'Content of the modal',
                visible: false,
                confirmLoading: false,

                data: [],
                pagination: {
                    showLessItems: true,
                    showQuickJumper: true,
                    showSizeChanger: true,
                    showTotal: (total, range) =>
                        `显示${range[0]}-${range[1]}条，共有 ${total}条`,
                },
                query: {
                    page: 1, //第几页
                    size: 10, //每页中显示数据的条数
                    hosName: '',
                    hosCode: '',
                    province: '',
                    city: '',
                },
                loading: false,
                columns,
            }
        },
        mounted() {
            this.fetch()
        },
        methods: {
            handleTableChange(pagination) {
                this.pagination.current = pagination.current
                this.pagination.pageSize = pagination.pageSize
                this.query.page = pagination.current
                this.query.size = pagination.pageSize
                this.fetch()
            },
            fetch() {
                this.loading = true
                getList({
                    limit: this.query.size,
                    page: this.query.page,
                }).then(({ reply, count }) => {
                    const pagination = { ...this.pagination }
                    pagination.total = count
                    this.loading = false
                    this.data = reply
                    this.pagination = pagination
                })
            },
            lookDetails(rec) {
                console.log('lookDetails clicked')
                console.log(rec)
                this.visible = true
                this.ModalText = rec
            },
            //点击ok
            handleOk() {
                this.visible = false
                this.confirmLoading = false
                console.log('Clicked ok button')
            },
            //点击cancel
            handleCancel() {
                console.log('Clicked cancel button')
                this.visible = false
            },
        },
    }
</script>
